<template>
	<view>
		<view class="login-container">
			<uni-icons type="contact-filled" size="100" color="#bcd6ff"></uni-icons>
			<view class="tips-text">登录后尽享更多权益</view>
			<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState('m_user', ['userinfo', 'userId']),
		},
		data() {
			return {
				userInfo: {},
			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateUserId']),
			async getUserInfo(e) {
				if (e.detail.errMsg === 'getUserInfo:fail auth deny') {
					uni.$showMsg('您取消了登录授权！');
					return;
				}

				const userInfo = e.detail.userInfo;
				try {
					const loginRes = await wx.login();
					console.log('登录凭证:', loginRes.code);

					if (loginRes.code) {
						wx.request({
							url: 'http://localhost:8088/wx/wxLogin',
							method: 'POST',
							data: {
								code: loginRes.code,
								nickName: userInfo.nickName,
								gender: userInfo.gender,
								avatarUrl: userInfo.avatarUrl,
							},
							success: (response) => {
								if (response.data && response.data.data) {
									const jwt = response.data.data;
									this.parseJwtAndUpdateUserId(jwt);
									this.updateToken(jwt);
									this.updateUserInfo(userInfo);
									// uni.setStorageSync('jwt', jwt);
									console.log('JWT是：', jwt);


									// 注意：这里不能使用 await，因为 wx.request 的 success 回调不是异步函数
									// 解决方案是调用另一个异步函数来处理这个请求，或者改用 Promise 风格的 wx.request（如果可用）
								} else {
									console.warn('未从服务器响应中获取到有效的 JWT 或响应数据');
								}
							},
							fail: (error) => {
								console.error('微信登录请求失败:', error);
							},
						});
					} else {
						console.error('微信登录失败:', loginRes.errMsg);
					}
				} catch (error) {
					console.error('登录过程中发生错误:', error);
				}
			},
			async parseJwtAndUpdateUserId(jwt) {
				try {
					const parseJwtRes = await uni.$http.get(`/wx/parseJwt/${jwt}`);
					const customString = parseJwtRes.data.data;
					const jsonObject = parseCustomStringToJson(customString);

					function parseCustomStringToJson(str) {
						// 去掉字符串两端的 {}，并按 = 分割成键值对数组
						const pairs = str.slice(1, -1).split(',').map(pair => pair.trim());
						// 创建一个空对象来存储转换后的键值对
						const jsonObj = {};
						// 遍历键值对数组，并将每个键值对转换成对象的属性
						pairs.forEach(pair => {
							const [key, value] = pair.split('=');
							// 注意：这里将值转换成了数字，因为看起来 exp 应该是一个数字。
							// 如果你的值可能是其他类型（如字符串、布尔值等），你可能需要更复杂的解析逻辑。
							jsonObj[key.trim()] = Number(value.trim());
						});

						return jsonObj;
					}
					console.log(jsonObject);
					const userId = jsonObject.userId
					this.updateUserId(userId);
					  // wx.redirectTo({ url: '/subpkg/my-infoset/my-infoset' });
				} catch (error) {
					console.error('解析JWT过程中发生错误:', error);
				}
			},
		},
	};
</script>
<style lang="scss">
	.login-container {
		// 登录盒子的样式
		height: 950rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		position: relative;
		overflow: hidden;

		// 绘制登录盒子底部的半椭圆造型
		&::after {
			content: ' ';
			display: block;
			position: absolute;
			width: 100%;
			height: 40px;
			left: 0;
			bottom: 0;
			background-color: white;
			border-radius: 100%;
			transform: translateY(50%);
		}

		// 登录按钮的样式
		.btn-login {
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #c00000;
		}

		// 按钮下方提示消息的样式
		.tips-text {
			font-size: 12px;
			color: gray;
		}
	}
</style>